<template>
  <el-dialog
    v-model="visible"
    width="600px"
    :before-close="handleClose"
    class="unified-dialog bulk-stop-dialog"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-icon header-icon-warning">
          <el-icon><VideoPause /></el-icon>
        </div>
        <div class="header-content">
          <h3>批量停止作业</h3>
          <p>批量停止多个Flink作业</p>
        </div>
      </div>
    </template>
    <div class="bulk-info">
      <el-alert
        title="批量停止操作"
        type="warning"
        :closable="false"
        show-icon
      >
        <template #default>
          <p>将停止以下 {{ jobs.length }} 个作业：</p>
          <ul class="job-list">
            <li v-for="job in jobs" :key="job.job_id || job.job_name">
              {{ job.job_name }}
            </li>
          </ul>
        </template>
      </el-alert>
    </div>
    
    <el-form
      ref="formRef"
      :model="form"
      label-width="100px"
      label-position="left"
      style="margin-top: 20px"
    >
      <el-form-item label="停止间隔">
        <el-input-number
          v-model="form.interval"
          :min="1"
          :max="60"
          controls-position="right"
        />
        <span class="form-tip">秒，避免同时停止造成系统压力</span>
      </el-form-item>
      
      <el-form-item label="Flink环境">
        <el-select
          v-model="form.flink_env"
          placeholder="选择Flink环境"
          clearable
          filterable
          style="width: 100%"
          popper-class="batch-dialog-select-popper"
          :teleported="true"
        >
          <el-option
            v-for="env in environmentOptions"
            :key="env.value"
            :label="`${env.label} (${env.host}:${env.port})`"
            :value="env.value"
          />
        </el-select>
        <span class="form-tip">选择Flink环境，留空使用默认环境</span>
      </el-form-item>
      
      <el-form-item label="更新数据库">
        <el-switch
          v-model="form.update_db"
          active-text="是"
          inactive-text="否"
        />
        <span class="form-tip">更新监控状态标志和暂停监控，多环境场景建议关闭</span>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="warning" @click="handleSubmit">
          确定停止
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useJobsStore } from '@/stores/jobs'
import { useAppStore } from '@/stores/app'
import { useFlinkEnvStore } from '@/stores/flinkEnv'
import { ElMessage } from 'element-plus'
import { componentLogger } from '@/utils/logger'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  jobs: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'success', 'start-batch'])

const jobsStore = useJobsStore()
const appStore = useAppStore()
const flinkEnvStore = useFlinkEnvStore()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const formRef = ref()

const form = ref({
  interval: 5,
  flink_env: '',
  update_db: false  // 默认不更新数据库
})

// 环境选项
const environmentOptions = computed(() => flinkEnvStore.getEnvironmentOptions())

const handleClose = () => {
  visible.value = false
}

const handleSubmit = () => {
  // 立即关闭配置对话框
  handleClose()
  
  // 准备批量操作参数
  const batchParams = {
    interval: form.value.interval,
    flink_env: form.value.flink_env || undefined,
    savepoint: false,
    update_db: form.value.update_db  // 传递数据库更新标志
  }
  
  // 通知父组件开始批量操作
  emit('start-batch', {
    jobs: props.jobs,
    params: batchParams
  })
}

// 监听对话框显示状态，重置表单
watch(visible, (newVal) => {
  if (newVal) {
    form.value = {
      interval: 5,
      flink_env: ''
    }
  }
})

// 组件挂载时加载环境配置
onMounted(() => {
  flinkEnvStore.fetchFlinkEnvironments()
})
</script>

<style scoped>
/* 对话框已使用统一样式系统 (dialog-system.css) */

.bulk-info {
  margin-bottom: 20px;
}

.job-list {
  margin: 10px 0 0 0;
  padding-left: 20px;
  max-height: 150px;
  overflow-y: auto;
}

.job-list li {
  margin: 4px 0;
  font-size: 14px;
  color: #606266;
}

.form-tip {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 环境选项样式 */
.env-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.env-name {
  font-weight: 500;
  color: #303133;
}

.env-url {
  font-size: 12px;
  color: #909399;
}

/* 强制显示下拉选项内容 */
:deep(.el-select-dropdown__item) {
  padding: 8px 20px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

:deep(.el-select-dropdown__item span) {
  display: block !important;
  white-space: normal !important;
}

/* 表单项样式优化 */
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  color: #303133;
  font-weight: 600;
  font-size: 14px;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  border-color: #409eff;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

:deep(.el-button--warning) {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

:deep(.el-button--warning:hover) {
  background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
}
</style>
